<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" media="screen">
			<script src="${pageContext.request.contextPath}/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
			  <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
				 <style type="text/css">
      body {
        padding-top: 40px;
        padding-bottom: 40px;
        background-color: #f5f5f5;
      }

      .form-signin {
        max-width: 300px;
        padding: 19px 29px 29px;
        margin: 0 auto 20px;
        background-color: #fff;
        border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
           -moz-border-radius: 5px;
                border-radius: 5px;
        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
           -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
                box-shadow: 0 1px 2px rgba(0,0,0,.05);
      }
    .ui-upload {
      height: 30px;
      width: 80px;
      background-color: lavender;
      font-size: 14px;
      line-height: 30px;
      cursor: pointer;
      display: inline-block;
      text-align: center;
      color: #fff;
      border-radius: 3px;
      margin-left: 20px;
    }


    </style>
			
	</head>
	<body>
		 <div class="container">
        <div class="masthead">
        <ul class="nav nav-pills pull-right">
            <c:if test="${user.image eq null }"></c:if>
            <c:if test="${user.image ne null }">
                <li><img src="${pageContext.request.contextPath}/img/${user.image}" width="40px" height="40px" class="img-rounded"></li>
                
            </c:if>
                <li><a style="color:#4876FF;text-decoration:none">${user.username}</a></li>
                  <li><a href="main.jsp" style="color:#4876FF;text-decoration:none">注销</a></li>
            <li><a href="login?op=mian&userid=${user.userid }" style="color:#4876FF;text-decoration:none">首页</a></li>
         
        </ul>
        <h3 class="muted">The article management</h3>
      </div>
      <form class="form-signin" action="login" method="post" enctype="multipart/form-data">
        <h2 class="form-signin-heading">个人中心</h2>	
        <input type="hidden" value="update" name="op">
    <span style="color: dodgerblue;font-family: '黑体';">头像:</span>
     <c:if test="${user.image eq null }">
      <img src="${pageContext.request.contextPath}/img/1560870912(1).png" width="40px" height="40px" class="img-rounded"/><br />
     </c:if>
            <c:if test="${user.image ne null }">
                <li><img src="${pageContext.request.contextPath}/img/${user.image}" width="40px" height="40px" class="img-rounded"></li>
            </c:if>
   
  <p></p>    
           <input type="hidden" name="userid" value="${user.userid }"/>
        <span id="uspan" style="color: dodgerblue;font-family: '黑体';cursor:pointer;">修改用户名:</span><input type="text" class="input-block-level" placeholder="用户名" name="username" id="username" disabled="disabled">
        	<span id="span1" style="color: orangered;font-family: '黑体';"></span>
        	<p></p>
     <span id="ps1" style="color: dodgerblue;font-family: '黑体';cursor:pointer;">修改密码:</span><input type="password" class="input-block-level" placeholder="密码" name="password" id="psw1" disabled="disabled">
<span id="span2" style="color: orangered;font-family: '黑体';"></span>
<p></p>
<span id="ps2" style="color: dodgerblue;font-family: '黑体';cursor:pointer;">确认密码:</span><input type="password" class="input-block-level" placeholder="确认密码" name="password1" id="psw2" disabled="disabled">
 <span id="span3" style="color: orangered;font-family: '黑体';"></span>
 <p></p>
 <span id="image" style="color: dodgerblue;font-family: '黑体';cursor:pointer;">更换头像: </span>
 <span id="image2" style="display: none;" width="60px" height="60px">
  <label class="ui-upload"  >上传头像<input  id="image1" type="file" style="display: none;" name="file1"/></label>    
</span>


   <br>
   	<br>
<p style="text-align: center;text-indent: -3em;"><input class="btn btn-large btn-primary" type="submit" value="提交" onclick="return confirm('确定要提交吗')"> </p>
      </form>

    </div> <!-- /container -->
    <script type="text/javascript">
			   
			      	  $("#username").focus(function(){
			      	  	  $("#span1").html("请输入用户名");
			      	  });
			      	   $("#username").blur(function(){
			      var $username = $("#username").val();	      	  	
			      	  	  if($username==""){
			      	  	  	   $("#span1").html("用户名不能为空");
			      	  	  };
			      	  	  if($username!=""){
			      	  	  	  $("#span1").html("");
			      	  	  };
			      	  });
			      	  
			      	    $("#psw1").focus(function(){
			      	  	  $("#span2").html("请输入密码");
			      	  });
			      	   	   $("#psw1").blur(function(){
			      var $psw1 = $("#psw1").val();	      	  	
			      	  	  if($psw1==""){
			      	  	  	   $("#span2").html("密码不能为空");
			      	  	  };
			      	  	  if($psw1!=""){
			      	  	  	  $("#span2").html("");
			      	  	  };
			      	  });
			      	      $("#psw2").focus(function(){
			      	  	  $("#span3").html("请确认密码");
			      	  });
			      	   	   $("#psw2").blur(function(){
			      	   	   	 var $psw1 = $("#psw1").val();	
			                 var $psw2 = $("#psw2").val();	      	  	
			      	  	  if($psw1!=$psw2){
			      	  	  	   $("#span3").html("密码不一致");
			      	  	  };
			      	  	  if($psw1==$psw2){
			      	  	  	  $("#span3").html("");
			      	  	  };
			      	  });
			      	  
			      	  $("#uspan").click(function(){
			      	  	$("#username").attr("disabled",false);
			      	  });
			          $("#ps1").click(function(){
			      	  	$("#psw1").attr("disabled",false);
			      	  });
			      	   $("#ps2").click(function(){
			      	  	$("#psw2").attr("disabled",false);
			      	  });
			      	   $("#image").click(function(){
			      	  	$("#image2").toggle();
			      	  });
		</script>
	</body>
</html>